<!DOCTYPE html>
 <html>
    <head>
     <meta charset="utf-8">
    <link rel="shortcut icon" href="logo.ico">
     <title>斩龙传说web端</title>
     <style>
        body{
           overflow: hidden;
        }
       h2{
          margin-top: 30px;
          text-align: center;
          background-color: #393D49;
          color: #fff;
          font-weight: normal;
          padding: 15px 0
       }
       #chat{
          text-align: center;
          }
       #win{
          margin-top: 20px;
          text-align: center;
       }
       #sse{
          margin-top: 10px;
          text-align: center;
       }
       #sse button{
          background-color: #009688;
          color: #fff;
          height: 40px;
          border: 0;
          border-radius: 3px 3px;
          padding-left: 10px;
          padding-right: 10px;
          cursor: pointer;
       }
       #sse2{
          text-align: center;
       }
       #sse2 button{
          background-color: #009688;
          color: #fff;
          height: 30px;
          border: 0;
          border-radius: 3px 3px;
          padding-left: 10px;
          padding-right: 10px;
          cursor: pointer;
       }
       
    </style>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>    
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript" src="js/settings.js"></script>
    </head>
    <body>
       <h2>斩龙传说 LOCO</h2>
       <div id="sse2">
       IP
       <select id='ip'>
  <option value="127.0.0.1">本地服务器</option>
  <option value="118.25.210.158">斩龙传说服务器</option>
  <option value="47.111.105.116">幻境风华服务器</option>
  <option value="other">其它请联系道长</option>

        </select>
        PORT
        <input id='port' type="text" value="9002" style="width:40px"></input>
        <button id='con' type="button" onclick="connect()" >连接</button>
        &nbsp;&nbsp;
        <button id='discon'type="button" onclick="disconnect()" disabled=true >断开连接</button>
        <br>
        帐号<input id="user" type="text" placeholder="434857005"/>
        密码<input id="pass" type="password" placeholder="123456"/>
        <button id="login" onclick="login_in()" disabled=true>登录</button>
        &nbsp;&nbsp;
        <button id="login_out" onclick="login_out()" disabled=true>退出登录</button>        
       </div>
       
       <div id="chat">
           <textarea id="history" cols="80" rows="35" onpropertychange="this.scrollTop = this.scrollHeight" οnfοcus="this.scrollTop = this.scrollHeight">请先连接服务器然后登录</textarea>
       </div>
 
       <div id="win">
          <textarea id="messagewin" cols="80" rows="2"></textarea>
       </div>
       
       <div id="sse">
            <button id="clearmsg"onclick="clearmsg()">清屏</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button id="sendmsg"onclick="sendMessage()">发送消息</button>
            <button id="sendmsg_attrack"onclick="sendmsg('打怪')">打怪</button>
            <button id="sendmsg_location"onclick="sendmsg('位置')">位置</button>
            <br><hr><br>
            <button id="sendmsg_north"onclick="sendmsg('前')">前</button>
            <button id="sendmsg_south"onclick="sendmsg('后')">后</button>
            <button id="sendmsg_left"onclick="sendmsg('左')">左</button>
            <button id="sendmsg_right"onclick="sendmsg('右')">右</button>
            <button id="sendmsg_up"onclick="sendmsg('上')">上</button>
            <button id="sendmsg_down"onclick="sendmsg('下')">下</button>
            &nbsp;&nbsp;
            <button id="sendmsg_selfinfo"onclick="sendmsg('个人信息')">个人信息</button>
       </div>
       
       <script type="text/javascript">      
       var oHistory = $('#history');
       var oWin = $('#messagewin');
       var ws;
       var mycookies="";
 
        function init(ip,port){
        if($("button#con")[0].innerText!="连接"){
        alert("请先断开连接！");
        }

       if ("WebSocket" in window){
          console.log("您的浏览器支持 WebSocket!");
          ws = new WebSocket("ws://"+ip+":"+port);
         //var ws = new WebSocket("ws://localhost:9001");
          ws.onopen = function(){
             $("button#discon")[0].disabled=false;
             $("button#con")[0].innerText="已连接";
             $("button#login")[0].disabled=false;
             $("button#login_out")[0].disabled=false;
             console.log("websocket 已连接上");
             $('textarea#history').val('你已经成功连接服务器。。。。\n如需玩游戏请登录。不知道密码请私聊游戏机器人 设置密码+xxx\n');
          }
 
          ws.onmessage = function (evt) { 
             var dataReceive = evt.data;
             console.log("数据已接收..."+dataReceive);
             if(dataReceive.indexOf("cookies:")>-1){
             mycookies = dataReceive.split("cookies:")[1];
             if(mycookies!=""  &&  mycookies.indexOf("获取失败")==-1){
             alert("登录成功！");
             $('button#login')[0].innerText="已登录";
             return;
             }
             else{
             mycookies="";
             alert("登录失败！");
             }
             }
             console.log(dataReceive);
             data_json = JSON.parse(dataReceive);
             if(data_json.hasOwnProperty("游戏信息")){
                    var game_infg = data_json.游戏信息;
                    $('#history').val($('#history').val() + "========================\n" + game_infg + "\n");
             }
             else
              {
                  $('#history').val($('#history').val() + "========================\n" + dataReceive + "\n");
              }
             auto_run();
          };
 
          ws.onclose = function()
             { 
                $("button#discon")[0].disabled=true;
                $("button#con")[0].innerText="连接";
               console.log("连接已关闭..."); 
               $('textarea#history').val('与服务器之间的连接已断开。。。。\n');
          };
 
       }else{
          // 浏览器不支持 WebSocket
          console.log("您的浏览器不支持 WebSocket!");
       }
       }
       function sendMessage(){
          var dataSend = oWin.val().trim();
          if(dataSend==""|| mycookies=="" || mycookies=="获取失败"){
          return;
          }
           if(cmd_config.hasOwnProperty(dataSend)){
               dataSend = cmd_config[dataSend];
               console.log(dataSend);
           }
          var json='{"command":"[cmd]","cookies":"[cookies]"}';
          json=json.replace("[cmd]",dataSend);
          json=json.replace("[cookies]",mycookies);
          console.log(json);
          ws.send(json);
          oWin.val('');
       }
       function sendmsg(msg){
          var dataSend = msg.trim();
          console.log(dataSend,cmd_config);
          if(cmd_config.hasOwnProperty(dataSend)){
              dataSend = cmd_config[dataSend];
              console.log(dataSend);
          }
          var json='{"command":"[cmd]","cookies":"[cookies]"}';
          json=json.replace("[cmd]",dataSend);
          json=json.replace("[cookies]",mycookies);
          console.log(json);
          ws.send(json);
          oWin.val('');
       }
       function clearmsg(){
       $('textarea#history').val('');
       console.log("清屏");
       }
       function connect(){
       var ip=$('#ip')[0].value;
       var port=$('#port')[0].value;
       console.log(ip,port);
       init(ip,port);
       }
       function disconnect(){
       ws.close();
       $("button#discon")[0].disabled=true;
       $("button#con")[0].innerText="连接";
       $('textarea#history').val('与服务器之间的连接已断开。。。。\n');
       }
       function login_in(){
       if($("button#login")[0].innerText=="已登录"){
       return;
       }
       
       var user = $("input#user").val();
       var pass = $("input#pass").val();
       if(user.length<6 || pass.length<6){
       console.log(user.length,pass.length);
       alert("错误！请确保qq号和密码大于6位！");
       return;
       }
       var json='{"user":"[user]","pass":"[pass]","command": "B5C7C2BC"}';
       json=json.replace("[user]",user);
       json=json.replace("[pass]",$.md5(pass));
       //alert(json);
       ws.send(json);
       }
       
       function login_out(){
       var user = $("input#user").val("");
       var pass = $("input#pass").val("");
       mycookies="";
       console.log("退出登录！");
       $("button#login")[0].innerText="登录";
       }
       
        function auto_run()
        {
            //console.log('自动下滚');
            var obj = document.getElementById("history");
            obj.scrollTop = obj.scrollHeight;
        }
       
    </script>
    </body>
 </html>